<template>
	<view>
		<uni-section title="行业牛人"></uni-section>
		<uni-grid :column="3" :show-border="false" :square="false" @change="changeBorder">
			<uni-grid-item v-for="(item ,index) in teacherInfo" :index="index" :key="index">
				<view class="p15 text-center">
					<view><cover-image class="head-image" :src="item.img" mode="aspectFill" /></view>
					<view class="p8-0"><b>{{item.name}}</b></view>
					<view class="text-left"><text class="brief">{{item.synopsis}}</text></view>
				</view>
			</uni-grid-item>
		</uni-grid>
		<uni-load-more :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{page:1,limit:18},
				loadData:true,
				teacherInfo:[],
				status:'more',
			}
		},
		onShow() {
			this.onGetBrother()
		},
		methods: {
			onGetBrother(){
				this.status = 'loading'
				if(!this.loadData){
					this.status = 'no-more'
					return false;
				}
				let _this = this
				this.$request_api('applet_api/border','POST',this.form).then(res => {
					if(_this.teacherInfo.length >= res.total){
						_this.loadData = false
						_this.status = 'no-more'
					}
					_this.teacherInfo.push(...res.data) 
				}).catch(err => {
					console.log(err)
				})
			},
			onReachBottom() {
				this.form.page = this.form.page + 1
				this.onGetBrother()
			},
			changeBorder(e){
				let id = this.teacherInfo[e.detail.index].id
				uni.navigateTo({
					url: "/pages/user_info/user_info?type=border&id="+id
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.img{width: 60%;height: 60px;}
	.head-image{border-radius: 50%;}
	.user-image{width: 60px;height: 60px;border-radius: 60px;}
	.brief{font-size: .6rem;}
	.recurit{border-bottom: 1px solid #EEE;}
</style>
